<template>
	<view class="personal">
	<!-- 用户信息开始 -->
	  <view class="user" v-if="login">
	    <view class="userimg">
	      <image :src="userphoto" mode=" heightFix"></image>
	    </view>
	    <view  class="username">{{username}}</view>
	  
	    </view>
	  <view v-else class="user" >
	    <view class="userimg">
	      <image src="@/static/nologin.png" mode="widthFix"></image>
	    </view>
	    <view  class="username">
	    <navigator url="/pages/login/login" class="loginbtn" hover-class="none">前往登录</navigator>
	    </view>
	  
	  </view>
	<!-- 用户信息结束 -->
	
	
	
	<!-- 订单信息开始 -->
	  <view class="products">
	  <navigator url="/pages/orderDetail/orderDetail?name=all"  class="myproduct" hover-class="none">
	      <text class="mpLeft">我的订单</text>
	      <view class="mpRight">
	        <text>查看全部订单</text>
	        <u-icon name="arrow-right"  size="30" bold></u-icon>
	      </view>
	    </navigator>
	    <view class="icon"> 
	     <navigator url="/pages/orderDetail/orderDetail?name=shenhe"   hover-class="none">
	     <image mode="widthFix" src="@/static/daishenhe.png"></image>
	       <text>   
	          待审核   
	       </text> 
	   </navigator>
	   <navigator  url="/pages/orderDetail/orderDetail?name=fahuo" hover-class="none">
	     <image mode="widthFix" src="@/static/daifahuo.png" ></image>   
	       <text>    
				待发货   
	       </text> 
	   </navigator> 
	   <navigator   url="/pages/orderDetail/orderDetail?name=wancheng" hover-class="none">
	     <image mode="widthFix" src="@/static/yiwancheng.png" ></image>
	       <text>
	            已完成
	       </text> 
	   </navigator>
	   <navigator  url="/pages/favorite/favorite"  open-type="navigate" hover-class="none">
	     <image mode="widthFix" class="" src="@/static/shoucangjia.png"></image>
	       <text>
				收藏夹
	       </text>
	   </navigator>
	   </view>
	  </view>
	  <!-- 订单信息结束 -->
		<view class="bottom-list">
			<u-cell-group>
				<u-cell 
				icon="setting" 
				title="个人设置" 
				:isLink="true"
				url="/pages/usersetting/usersetting"
				 ></u-cell>
				
				  <u-cell
				  icon="map"
				  title="收货地址"
				  :isLink="true"
				  url="/pages/address/address"
					></u-cell>
					
					<u-cell
					icon="phone"
					title="联系客服"
					:isLink="true"
					url="/pages/contactus/contactus"
					  ></u-cell>
					  
					  <u-cell
					  icon="question-circle"
					  title="常见问题"
					  :isLink="true"
					  url="/pages/questions/questions"
					    ></u-cell>
						
					<u-cell
					icon="share-square"
					title="退出登录"
					:isLink="true"
					url="/pages/componentsB/tag/tag"
					  ></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login:false
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
page {
  height: 100%;
}
.personal {
  height: 100%;
  background-color: rgba(248, 248, 248, 1);
	position: relative;
}
.personal .user {
  width: 100%;
  height: 350rpx;
  background-color: rgba(0, 0, 0, 0.45);
  font-weight: 600;
  display: flex;
  justify-content: center;
	align-items: center;
	flex-direction: column;
}
.personal .user .userimg {
  background-color: #fff;
  width: 132rpx;
  height: 132rpx;
  overflow: hidden;
  border: 8rpx solid white;
  border-radius: 50%;
  margin: 0 auto;
}
.personal .user .username {
  margin-top: 20rpx;
}
.personal .products {
  width: 100%;
  margin: 20rpx 0;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  padding: 15rpx 20rpx;
	box-sizing: border-box;
}
.personal .products .myproduct {
  margin: 10rpx 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.personal .products .myproduct .mpLeft {
  font-size: 30rpx;
  font-weight: 500;
}
.personal .products .myproduct .mpRight {
  display: flex;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}
.personal .products .icon {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  margin: 20rpx 0;
}
.personal .products .icon navigator {
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 24rpx;
  flex-direction: column;
  display: flex;
}
.personal .products .icon navigator image{
	display: block;
	width: 70rpx;
	margin-bottom: 10rpx;
}
.bottom-list{
	background-color: #fff;
}
.loginbtn{
	background-color: #fff;
	padding:20rpx  25rpx;
	border-radius: 10rpx;
}
</style>
